<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>angularJs</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>


<div ng-app ="myApp" ng-controller="ctrl">
    姓名：<input type="text" ng-model="name">
    <p>{{name}}</p>
    <div  ng-repeat="x in item" >
        {{x.name1}}
        {{x.value}}
    </div>
    </div>

<table id="dg" title="My Users" class="easyui-datagrid" style="width:550px;height:250px"
       url="/allUser"
       toolbar="#toolbar"
       rownumbers="true" fitColumns="true" singleSelect="true">
    <thead>
    <tr>
        <th field="userId" width="50">ID</th>
        <th field="name" width="50" editor="false">Name</th>

    </tr>

    </thead>
</table> 

<div id="toolbar">
    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Remove User</a>
</div>
查询：<input type="text" id="uid"> <button onclick="findUser()"class="easyui-linkbutton">查询</button>

<div id="add" class="hidden">
    <form name="addform" method="post" id = "addform" class="hidden">
    name : <input name="name" type="text">
    </form>
</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('ctrl', function($scope) {
        $scope.name = "John";
        $scope.item =[{name1:'xx', itemId:1,value:10},
            {name1:'yy', itemId:1,value:10},
            {name1:'zz', itemId:1,value:10},
            {name1:'nn', itemId:1,value:10}];
        $scope.clickName = function() {
            return $scope.name;
        }
    });

    function findUser(){

        var handler = "/user";
        $("#dg").datagrid('options').url=handler;
        $('#dg').datagrid('options').queryParams = {userId : $("#uid").val()};

        $("#dg").datagrid('reload');

    }
     function newUser(){

       $("#add").dialog({
           title: 'newUser',
           width: 400,
           height: 200,
           modal: true,
           buttons:[{
               text:'保存',
               iconCls:'icon-save',
               handler:function(){
                   // submit the form
                   $('#addform').form({
                       url:"/addUser",
                       method:'POST',

                       success:function(data){
                           if(data!=null){
                               $("#add").dialog('close');
                               $("#dg").datagrid('reload');
                           }else{
                               $.messager.alert('error');
                           }
                       }
                   });
                   $('#addform').submit();
               }

           },
           {
               text:'关闭',
               iconCls:'icon-no',
               handler:function(){
                   $("#add").dialog('close');
               }
           }]
       })

         $("#add").dialog('open');
    }

    function editUser(){

        var handler = "/user";
        $("#dg").datagrid('options').url=handler;
        $('#dg').datagrid('options').queryParams = {userId : $("#uid").val()};

        $("#dg").datagrid('reload');

    }
    function destroyUser(){

        var handler = "/user";
        $("#dg").datagrid('options').url=handler;
        $('#dg').datagrid('options').queryParams = {userId : $("#uid").val()};

        $("#dg").datagrid('reload');

    }
</script>
</body>
</html>